<template>
  <div>
    <user-item v-if="item.role === 'user'" :key="item.message_id" :item="item" />
    <server-item
      v-if="item.role === 'assistant'"
      :key="item.message_id"
      :item="item"
    />
    <clipbord-item v-if="item.role === 'clipbord'" :key="item.message_id" :item="item" />
    <tips-item v-if="item.role === 'tips'" :key="item.message_id" :item="item" />
    <chat-item v-if="item.next" :item="item.next" />
  </div>
</template>

<script >
import UserItem from './user-item.vue'
import ServerItem from './server/index.vue'
import TipsItem from './tips-item.vue'
// import ChatItem from './index.vue'
import clipbordItem from './clipbord-item.vue'
export default {
  name: 'ChatItem',
  components: {
    UserItem,
    ServerItem,
    TipsItem,
    // ChatItem: this,
    clipbordItem
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
  }
}
</script>
